<template>
  <div style="padding: 20px;">
    <div class="anchor-title">锚点测试</div>
    <bs-anchor :container="contentRef" :offset="0">
      <bs-anchor-link href="#id1">锚点1</bs-anchor-link>
      <bs-anchor-link href="#id2">锚点2
        <template #sub-link>
          <bs-anchor-link href="#id3">锚点3</bs-anchor-link>
        </template>
      </bs-anchor-link>
      <bs-anchor-link href="#id4">锚点4</bs-anchor-link>
    </bs-anchor>
    <div class="container-wrap" ref="contentRef">
      <div class="c1" id="id1"></div>
      <div class="c2" id="id2"></div>
      <div class="c3" id="id3"></div>
      <div class="c4" id="id4"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import BsAnchor from '@/components/anchor/BsAnchor.vue'
import BsAnchorLink from '@/components/anchor/BsAnchorLink.vue'
import {ref} from 'vue'

const contentRef = ref()

</script>
<style lang="scss" scoped>
.container-wrap {
  height: 500px;
  overflow-y: auto;
  .c1 {
    height: 700px;
    background-color: #ccc;
  }
  .c2 {
    height: 400px;
    background-color: #e75656;
  }
  .c3 {
    height: 600px;
    background-color: #8be756;
  }
  .c4 {
    height: 400px;
    background-color: #7d56e7;
  }
}
</style>
